<template>
  <div class="home">
    <el-container>
        <el-header style="height:10vh">
          <div class="header">
            <div class="header_title_wrapper">
              <h1> UNI-ADMIN</h1>
            </div>
            <div class="header_title_wrapper_123">
                <el-menu :default-active="this.$route.meta.Name" 
                @select="onSelectHome"
                background-color="#B3C0D1"
                text-color="white"
                active-text-color="yellow"
                class="el-menu-demo" 
                mode="horizontal" >
                  <el-menu-item index="/">首页</el-menu-item>
                  <el-menu-item index="/mall">商品</el-menu-item>
                  <el-menu-item index="/order">订单</el-menu-item>
                  <el-menu-item index="4">会员</el-menu-item>
                  <el-menu-item index="5">设置</el-menu-item>
                  <el-submenu index="6">
                    <template slot="title"><i class="el-icon-user"></i>admin</template>
                    <el-menu-item index="6-1">修改</el-menu-item>
                    <el-menu-item index="6-2" @click="onClickDelete">退出</el-menu-item>
                  </el-submenu>
                </el-menu>
            </div>
          </div>
        </el-header>
        <router-view></router-view>
    </el-container>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
       
    }
  },
  methods:{
    onClickDelete(){
      localStorage.removeItem("token");
      this.$message.success("退出成功!000")
      this.$router.push("/login");
    },
    onSelectHome(index){
      this.$router.push(index)
    }
  }
}
</script>

<style>
   .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    height: 15vh;

  }
  

  .header
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .header_title_wrapper
  {
    width:30%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .header_title_wrapper_123
  {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .el-menu-demo
  {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  
</style>
